<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*#x{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /*background-color: red;*/

            /*transition: all 2s;*/

            /*!*transition-property: height,width;*!*/
            /*!*transition-property: all;*!*/
            /*!*transition-duration: 1s;*!*/
            /*!*transition-delay: 1s;*!*/
            /*!*transition-timing-function: cubic-bezier(0,0.8,0.9,1);*!*/

        /*}*/

        /*#x:hover{*/
            /*height: 600px;*/
            /*width: 600px;*/
        /*}*/
        
        @keyframes xxx {
            0% {background-color: red}
            11% {background-color: blue}
            20% {background-color: lime}
            30% {background-color: chocolate}
            50% {background-color: blueviolet; height: 300px}
            60% {background-color: pink; border-radius: 50%; border: #00aafa 2px solid}
            80% {background-color: orange}
            100% {background-color: deeppink}
        }

        #x{
            height: 200px;
            width: 200px;
            background-color: #000;
            animation-name: xxx;
            animation-duration: 10s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }


        
    </style>
</head>
<body>


<div id="x">

</div>

<button type="button" id="a">开始</button>
<button type="button" id="b">暂停</button>

<script>

    var x = document.getElementById('x');
    var a = document.getElementById('a');
    var b = document.getElementById('b');

    a.onclick = function () {

        x.style.animationPlayState = 'running'
    };
    
    b.onclick = function () {
        x.style.animationPlayState = 'paused'
    }

</script>

</body>
</html>